<template>
  <view class="muban-card">
    <view class="d-title">上传孩子照片</view>
    <view class="d-top">首张必须为孩子正面照片，才可通过审核哦</view>
    <image :src="photoImg" alt="" />
    <view class="d-btn" @click="select"><custom-btn>从相册上传</custom-btn></view>
    <view class="d-cancel" @click="cancelFn">取消</view>
  </view>
</template>

<script setup>
import { urlConf } from "@/config/resource";
import useStore from "@/store";
const photoImg = urlConf + "common/123.png";
const { common } = useStore();

const select = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album"], //从相册选择
    success: (res) => {
      //  示例：防止大图片文件的Image无法直接临时路径显示图片
      uni.showLoading({
        title: "处理中...",
        mask: true,
      });
      // 使用uni.compressImage压缩图片
      uni.compressImage({
        src: res.tempFilePaths[0],
        quality: 80, // 压缩质量
        success: (compressRes) => {
          common.updateUploadImg(compressRes.tempFilePath);
          uni.navigateTo({ url: "/subPages/cropper/index" });
        },
        fail: (err) => {
          console.error("图片压缩失败：", err);
        },
        complete: () => {
          uni.hideLoading(); // 关闭loading
        },
      });
    },
  });
};

const cancelFn = () => {
  common.updatePopupOpen(false, "muban");
};
</script>

<style lang=scss scoped>
.muban-card {
  border-radius: 30rpx;
  padding: 60rpx 56rpx;
  background: #fff;
  .d-title {
    font-weight: 800;
    font-size: 40rpx;
    color: #000;
    text-align: center;
    padding-bottom: 20rpx;
  }
  .d-top {
    font-size: 32rpx;
    color: #666;
    padding-bottom: 60rpx;
    text-align: center;
  }

  .d-btn {
    width: 526rpx;
    height: 116rpx;
    line-height: 120rpx;
    background: #f65952;
    border-radius: 120rpx;
    margin: 50rpx auto 0;
    font-weight: 500;
    font-size: 36rpx;
    color: #fff;
  }
  .d-cancel {
    text-align: center;
    padding: 50rpx;
  }
}
</style>                                                